<template>
  <pull-to @infinite-scroll="loadmore">
    <div class="box-wapper">
      <div class="box-spine" :style="{height:scrollHeight+'px'}"></div>
      <div class="clearfix">
        <template v-for="(item,index) of articleList">
          <article-item :key="index" :article-item="item" :index="index+1-0"></article-item>
        </template>
      </div>
      <!-- <div class="box-more" @click="pageShow" v-if="articleList.length==10">加载更多</div> -->

      <div class="box-more fs14">
        <span v-if="isNotData"></span>
        <span v-else>
          <i class="el-icon-loading"></i> 加载更多</span>
      </div>

    </div>
  </pull-to>
</template>

<script>
import PullTo from "vue-pull-to";
import service from '@/service';
// import charsleAside from '@/components/common/aside'
import articleItem from '@/components/common/list';
export default {
  name: 'technology',
  props: ['name'],
  data() {
    return {
      articleList: [],
      userInfo: {},
      scrollHeight: 0,
      page: 0,
      isNotData: true,
      total: 0
    }
  },
  created() {
    // this.getUserInfo();
    this.getArticleList();
  },
  methods: {
    loadmore() {
      setTimeout(() => {
        if (this.isNotData) {
          this.getArticleList(this.page + 1);
        }
      }, 500);
    },
    async getUserInfo() {
      let result = await service.getUserInfo();
      if (result.success) {
        this.userInfo = result.data;
      }
    },
    async getArticleList(page = 1) {
      let loading = document.getElementById('show-loading')
      loading.style.display = 'flex'
      let type_alias = this.name;
      let params = {
        page: page,
        pageSize: 10
      }
      if (type_alias) {
        params.type_alias = type_alias;
      }
      let result = await service.getArticleItemList(params);
      if (result.success) {
        var homeRight = document.querySelectorAll('.scroll-container')[0];
        loading.style.display = 'none'
        let res = result.data;

        this.articleList = this.articleList.concat(res.pageList);
        this.total = res.nums;
        this.page = res.page;

        setTimeout(() => {
          this.scrollHeight = homeRight.scrollHeight
        }, 60);
        if (res.pageList.length < 10) {
          this.isNotData = false;
        } else {
          this.isNotData = true;
        };
      }
    }
  },
  components: {
    // charsleAside,
    PullTo,
    articleItem
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box-spine {
  width: 0px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
  z-index: 1;
  border: dotted 1px #acb7c0;
}
.box-more {
  position: relative;
  text-align: center;
  /* background: #00aeff; */
  color: #fff;
  width: 100px;
  margin: 0 auto;
  cursor: pointer;
  padding: 5px 0;
  z-index: 999999;
  border-radius: 5px;
}
</style>
